<template>
  <el-form  style="background-color: #1B4685" ref="traceSearchForm" :inline="true" label-width="72px" :label-position="'left'">
    <el-row class="search-title">车辆追踪搜索</el-row>
    <el-form-item prop="plateNo">
      <el-input v-model="carTraceParam.plateNo" prefix-icon="el-icon-search" clearable
                placeholder="车牌号"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button class="btn-search" type="primary" @click="handleSearch" v-bind:disabled="!carTraceParam.plateNo">搜索
      </el-button>
    </el-form-item>
    <collapse-vertical>
      <div v-show="isDisplay">
        <el-row :gutter="24">
          <el-col :xs="24" :sm="8" :lg="8">
            <el-row>
              <el-form-item prop="category" label="车牌颜色">
                <el-radio-group v-model="carTraceParam.plateColor" size="small">
                  <el-radio v-for="item in plateColors" :key="item.id" :label="item.id" style="color: white">{{item.value}}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item prop="category" label="追踪类型">
                <el-radio-group v-model="carTraceParam.traceType" size="small">
                  <el-radio v-for="item in trackCategorys" :key="item.id" :label="item.id" style="color: white">{{item.value}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-row>
            <!--            <el-row>
                          <el-form-item prop="parentorgname" label="发现地点">
                            <el-input clearable placeholder="追踪发现的地点" v-model="illParkModel.parentorgname"></el-input>
                          </el-form-item>
                        </el-row>
                        <el-form-item prop="date" label="追踪时间">
                          <el-date-picker v-model="illParkModel.date" type="date" placeholder="选择日期" format="yyyy年MM月dd日"
                                          value-format="yyyy-MM-dd">
                          </el-date-picker>
                        </el-form-item>-->
            <el-form-item>
              <el-button class="btn-mini-form" type="primary" style="color: white" @click="handleSearch"
                         size="mini">提交
              </el-button>
              <el-button class="btn-mini-form" type="primary" style="color: white" @click="handleReset"
                         size="mini">重置
              </el-button>
            </el-form-item>
            <el-row>
            <el-main>
              <el-table :data="carTraceMessages"
                        element-loading-background="rgba(0, 0, 0, .3)"
                        height="250"
                        :row-class-name="tableRowClassName"
                        style="width: 100%;padding-top: 0px;background-color: #1B4685"
                        :default-sort="{prop: 'time', order: 'descending'}">
                <el-table-column label="车牌号" align="center">
                  <template slot-scope="scope">
                    {{scope.row.plateNo}}
                  </template>
                </el-table-column>
                <el-table-column prop="time" label="发现地点" align="center">
                  <template slot-scope="scope">
                    {{scope.row.parkName}}
                  </template>
                </el-table-column>
                <el-table-column label="发现时间" align="center" sortable>
                  <template slot-scope="scope">
                    {{scope.row.time}}
                  </template>
                </el-table-column>

              </el-table>
            </el-main>
            <el-footer>
              <el-pagination style="margin-top: 16px" background
                             @size-change="handleSizeQueryTrace"
                             @current-change="handleCurrentChangeTrace"
                             :current-page="listQuery.num"
                             :page-sizes="[10,20,30, 50]"
                             :page-size="listQuery.pageSize"
                             layout="total, sizes, prev, pager, next, jumper" :total="total">
              </el-pagination>
            </el-footer>
            </el-row>
          </el-col>
          <el-col :xs="24" :sm="16" :lg="16">
            <baidu-map class="map" :center="center" :scrollWheelZoom="true" :zoom="14" @moveend="getCenters">
              <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
              <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
                           anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-map-type>
              <bm-marker v-for="(item,index) in carTraceRecords"
                         :position="{lng: item.parkLng, lat: item.parkLat}"
                         :icon="{url: '../src/assets/map_images/markersfull.png', size: {'width':30,'height':50}}"
                         :offset="{'width':0,'height':0}"
                         @click="openInfo(item)" >
                <template v-if="index === 0">
                  <bm-label  :content="item.parkName" :labelStyle="{color: 'red', fontSize : '20px'}" :offset="{width: -25, height: 30}"/>
                </template>
                <template v-else>
                  <bm-label  :content="item.parkName" :labelStyle="{ fontSize : '18px'}" :offset="{width: -25, height: 30}"/>
                </template>
                <bm-info-window :position="{lng: item.parkLng, lat: item.parkLat}" :show="index===0?true:false"
                                @close="infoWindowClose" @open="infoWindowOpen">
                  <p style="margin:0 0 5px 0;padding: 0;font-size: 16px"><strong>停车场名称：{{item.parkName}}</strong></p>
                  <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">车场联系人：{{item.linkMan}}</p>
                  <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">车场联系电话：{{item.linkManPhone}}</p>
                  <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">
                    车场类型：{{item.type==1?"道路停车场":"公共停车场"}}</p>
                  <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">最后出现时间:{{item.time}}</p>
                  <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">总共出现：{{item.times}}次</p>
                </bm-info-window>
              </bm-marker>
              <bm-info-window :position="{lng: this.infoWindow.parkLng, lat: this.infoWindow.parkLat}" :show="show"
                              @close="infoWindowClose" @open="infoWindowOpen">
                <p style="margin:0 0 5px 0;padding: 0;font-size: 16px"><strong>停车场名称：{{this.infoWindow.parkName}}</strong></p>
                <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">车场联系人：{{this.infoWindow.linkMan}}</p>
                <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">车场联系电话：{{this.infoWindow.linkManPhone}}</p>
                <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">
                  车场类型：{{this.infoWindow.type==1?"道路停车场":"公共停车场"}}</p>
                <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">最后出现时间:{{this.infoWindow.time}}</p>
                <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">总共出现：{{this.infoWindow.times}}次</p>
              </bm-info-window>
            </baidu-map>

          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :xs="24" :sm="8" :lg="8">

          </el-col>

        </el-row>
      </div>
    </collapse-vertical>
    <el-row style="text-align: center">
      <el-button style="border: none;background-color: transparent" size="small"
                 @click="isShow" :icon="isDisplay?'el-icon-arrow-up':'el-icon-arrow-down'">
      </el-button>
    </el-row>
  </el-form>
</template>

<script>
  import CollapseVertical from '../../../utils/collapseVertical';
  import { queryCarTraceMessageByCarAndType, queryCarTraceRecord } from '../../../api/comprehensive/track';

  export default {
    components: {
      CollapseVertical
    },
    created() {

    },
    name: 'track-search',
    data() {
      return {
        isDisplay: false,
        total: 0,
        listQuery: {
          num: 1,
          pageSize: 20,
          condition: null
        },
        carTraceParam: {
          plateNo: '',
          plateColor: 2,
          traceType: 1
        },
        plateColors: [
          { id: 0, value: '白' },
          { id: 1, value: '黄' },
          { id: 2, value: '蓝' },
          { id: 3, value: '黑' },
          { id: 4, value: '绿' },
          { id: 9, value: '其他颜色' }
        ],
        trackCategorys: [
          { id: 1, value: '嫌疑车' },
          { id: 2, value: '脱审车' },
          { id: 3, value: '套牌车' },
          { id: 4, value: '欠费车' }
        ],
        show: false,
        center: {
          lng: 117.536943,
          lat: 36.702987
        },
        carTraceMessages: [],
        carTraceRecords: [],
        infoWindow: {
          inImageUrl: '',
          linkMan: '',
          linkManPhone: '',
          orgName: '',
          orgNo: '',
          parkLat: '',
          parkLng: '',
          parkName: '',
          parkNo: '',
          parkType: '',
          plateColor: '',
          plateNo: '',
          time: '',
          times: '',
          type: '',
          typeName: '',
        },
        coordinate: [
          // {  parkLong: 117.541803, parkLati: 36.69844,placenum:"79", parkname:'教导大队停车场',parkNo:"1001",
          //   parkOrg:'章丘停车公司',total:'301',remain:'221'},
          // {  parkLong: 117.5367, parkLati: 36.6908 ,placenum:"89",parkname:'电视台停车场',parkNo:"1002",
          //   parkOrg:'章丘停车公司',total:'304',remain:'225'}
        ]

      };
    },
    methods: {

      queryCarTraceMessageByCarAndType() {
        this.listQuery.condition = this.carTraceParam;
        queryCarTraceMessageByCarAndType(this.listQuery).then(res => {
          this.carTraceMessages = res.list;
          this.total = res.count;
          this.loading = false;
        },
        () => {
          this.loading = false;
        });
      },
      queryCarTraceRecord() {
        queryCarTraceRecord(this.carTraceParam).then(res => {
          this.carTraceRecords = res;
          if (res.length > 0) {
            this.center.lng = res[0].parkLng;
            this.center.lat = res[0].parkLat;
          }
          this.loading = false;
        },
        () => {
          this.loading = false;
        });
      },
      handleSearch() {
        this.queryCarTraceMessageByCarAndType();
        this.queryCarTraceRecord();
      },
      handleSizeQueryTrace(val) {
        this.listQuery.pageSize = val;
        this.queryCarTraceMessageByCarAndType();
      },
      handleCurrentChangeTrace(val) {
        this.listQuery.num = val;
        this.queryCarTraceMessageByCarAndType();
      },
      handleReset() {
        this.$refs['traceSearchForm'].resetFields();
      },
      isShow() {
        this.isDisplay = !this.isDisplay;
      },
      getCenters(val) {
        const { lng, lat } = val.target.getCenter();
        this.center.lng = lng;
        this.center.lat = lat;
      },
      // 打开信息窗体
      openInfo(val) {
        this.infoWindow.parkName = val.parkName;
        this.infoWindow.parkLat = val.parkLat;
        this.infoWindow.parkLng = val.parkLng;
        this.infoWindow.parkNo = val.parkNo;
        this.infoWindow.parkType = val.parkType;
        this.infoWindow.orgName = val.orgName;
        this.infoWindow.plateColor = val.plateColor;
        this.infoWindow.times = val.times;
        this.infoWindow.type = val.type;
        this.infoWindow.typeName = val.typeName;
        this.infoWindow.time = val.time;
        this.infoWindow.linkMan = val.linkMan;
        this.infoWindow.linkManPhone = val.linkManPhone;
        this.infoWindow.inImageUrl = val.inImageUrl;
        this.show = true;
      },
      infoWindowClose(e) {
        this.show = false;
      },
      infoWindowOpen(e) {
        this.show = true;
      },
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex % 2 === 0) {
          return 'one-row';
        }
        return '';
      }
    }
  };
</script>

<style scoped>

  .map-row {
    width: 100%;
    height: 60vh;
  }

  .map {
    width: 100%;
    height: 500px;
  }
</style>
